<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-06-09 10:33:53
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-08-07 10:51:23
 * @FilePath: \ship-schedule-ui\src\widgets\demo\visualize-trace\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <mars-dialog :draggable="false" :top="10" :left="10" height="70px">
    <div class="item waybill">
      <input type="file" id="fileInput" title="选择Json文件" accept=".json" @change="handleFile" />
    </div>
    <!-- <div class="item waybill">
      <a-button type="primary">加载数据</a-button>
    </div> -->
    <!-- <div class="item waybill">
      <a-descriptions title="User Info" :column="1">
        <a-descriptions-item label="UserName">Zhou Maomao</a-descriptions-item>
        <a-descriptions-item label="Telephone">1810000000</a-descriptions-item>
        <a-descriptions-item label="Live">Hangzhou, Zhejiang</a-descriptions-item>
        <a-descriptions-item label="Remark">empty</a-descriptions-item>
        <a-descriptions-item label="Address"> No. 18, Wantangna </a-descriptions-item>
      </a-descriptions>
    </div> -->
  </mars-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onUnmounted, onMounted } from "vue"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import type { Dayjs } from "dayjs"
import dayjs from "dayjs"
import * as mapWork from "./map"

import { $alert, $notify, $message, $showLoading, $hideLoading } from "@mars/components/mars-ui/index"
import Papa from "papaparse"

// 启用map.ts生命周期
useLifecycle(mapWork)

interface FormState {
  contrast: number
  date: Dayjs | null
}
const formState = reactive<FormState>({
  contrast: 128,
  date: dayjs("2021-06-01")
})
const marks: Record<number, any> = {
  "-255": "-255",
  "-200": "200",
  "-100": "-100",
  0: "0",
  100: "100",
  200: "200",
  255: "255"
}
//  带刻度滑动条修改事件
const onMarkSliderChange = () => {
  // mapWork.updateContrast(formState.contrast) //  调用地图方法
}

onMounted(() => {
  // mapWork.showTrackPlay(formState.date.format("YYYY-MM-DD hh:mm:ss"))
})
onUnmounted(() => {
  console.log("aa")
})

//  日期切换事件
const onDateChange = (data: any, value: any) => {
  mapWork.showTrackPlay(value + " 00:00:00")
}

const csvData = null
const handleFile = (event) => {
  const file = event.target.files[0]
  if (!file) {
    return
  }
  const fileReader = new FileReader()
  fileReader.onload = (e) => {
    try {
      const jsonText = e.target.result
      const jsonObject = JSON.parse(jsonText)
      console.log(jsonObject)
      mapWork.setDataSource(jsonObject)
    } catch (error) {
      console.error("JSON解析错误:", error)
    }
  }
  fileReader.readAsText(file)

  // const file = event.target.files[0]
  // if (!file) {
  //   return
  // }
  // Papa.parse(file, {
  //   complete: function (results) {
  //     csvData = results.data
  //     mapWork.dataProcess(csvData)
  //     console.log(csvData) // 解析后的数据，以二维数组形式存储，第一行是表头，其余是数据行
  //   }
  // })
}
</script>
<style lang="less">
.leaflet-control-playback {
  position: relative;
  top: 100px;
  background-color: #0000ff;
  padding: 10px;

  border-bottom: 1px solid #008aff70;
  border-left: 1px solid #008aff70;
  border-right: 1px solid #008aff70;
  box-shadow: 0px 4px 15px 1px rgba(2, 33, 59, 0.7);
  border-radius: 0px;
  background: linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) left bottom no-repeat,
    linear-gradient(to bottom, var(--mars-base-color), var(--mars-base-color)) left bottom no-repeat,
    linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) right bottom no-repeat,
    linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) right bottom no-repeat;
  background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;
  background-color: var(--mars-bg-base) !important;
}
.leaflet-control-playback .optionsContainer {
  position: relative;
  // display: none;
}
.leaflet-control-playback .optionsContainer > div {
  display: inline-block;
}
.leaflet-control-playback .buttonContainer {
}
.leaflet-control-playback .buttonContainer a {
  display: inline-block;
  width: 32px;
  height: 32px;
  text-decoration: none;
}
.leaflet-control-playback .buttonContainer .btn-stop {
  background: url(./img/common/control_play_blue.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-start {
  background: url(./img/common/control_pause_blue.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-restart {
  background: url(./img/common/control_repeat_blue.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-slow {
  background: url(./img/common/control_rewind_blue.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-quick {
  background: url(./img/common/control_fastforward_blue.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-close {
  display: none;
  background: url(./img/common/control_stop_blue.png) no-repeat center;
}
</style>
